<template>
	<diyBase>
		<template #left="{}">
			<div class="tabbar flex">
				<div
					class="tabbar-item flex flex-col justify-center items-center flex-1"
					v-for="(item, index) in tabbarData.list"
					:key="index"
					:style="{ color: tabbarData.style.default_color }"
				>
					<img class="w-[22px] h-[22px]" v-if="item.unselected_icon" :src="getUrl(item.unselected_icon)" alt="" />
					<div class="leading-3 text-[12px] mt-[4px]">{{ item.name }}</div>
				</div>
			</div>
		</template>
		<template #right="{}">
			<diyTabbar ref="diyTabbarRef" @getData="getData" />
		</template>
		<template #footer="{}">
			<el-button v-auth="'diy/setTabbarData'" type="primary" @click="handleSubmit">保存</el-button>
		</template>
	</diyBase>
</template>
<script lang="ts" setup name="decorationTabbar">
import { reactive, ref } from 'vue';
import { messageSuccess } from '/@/utils/message';
import { getUrl } from '/@/utils/util';
import { diySetTabbar } from '/@/api/diy';
import diyBase from '/@/views/decoration/mobile/component/diyBase.vue';
import diyTabbar from '/@/views/decoration/mobile/component/diyTabbar.vue';

const diyTabbarRef = ref();

const tabbarData = reactive({
	style: {
		default_color: '',
		selected_color: '',
	},
	list: [],
});

const getData = (data:any) => {
	tabbarData.style = data.style;
	tabbarData.list = data.list;
};

// 保存提交
const handleSubmit = async () => {
	await diySetTabbar({ type: 1, data: tabbarData });
	diyTabbarRef.value.getData();
	messageSuccess('设置成功');
};

</script>
<style lang="scss" scoped>
.diy-box {
	.page-preview .tabbar {
		position: absolute;
		height: 50px;
		background-color: #fff;
		bottom: 0;
		width: 100%;
		border: 2px solid var(--el-color-primary);
	}
}
</style>
